<template>
  <div>
    <div v-show="database!=''" separator="/" style="margin:10px 0 0 0;font-size:18px;">
      <span>{{this.web}} / </span>
      <span class="database" @click="webDatabase">{{database}} / </span>
      <span v-if="table!=''">{{table}}</span>
    </div>
    <div v-if="distory_">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      web:"",
      distory_:true,
      database:"",
      table:"",
      setInter:"",
    }
  },
  mounted(){
    
    //销毁重置组件事件
    this.$EventBus.$off('distoryDataview')
    this.$EventBus.$on("distoryDataview",(value)=>{
      console.log("总线接收到事件",value)
      this.web=value
      this.$axios.get("api/webDatabase?name="+value).then(async (data)=>{
        this.database=data.data
      })
      this.distory_=false
      //重置页面信息
      this.distory_=true
      setTimeout(()=>{
        this.$EventBus.$emit("ShowDataTable",value) 
      },200)
    })

    //

  },
  methods:{
    webDatabase(){
      console.log("销毁组件")
      this.distory_=false
      setTimeout(()=>{
        this.distory_=true
        setTimeout(()=>{
          this.$EventBus.$emit("ShowDataTable",this.web) 
        },100)
        console.log("重置组件")
      },100)
    }
  }
}
</script>

<style lang="scss">
.database {
  cursor: pointer;
  font-weight: bold;
  &:hover {
    color: rgb(5, 194, 194);
  }
}
</style>